<template>
	<page-container v-if="visible" :class="['diy-goods-detail-wrap', 'fade-in']" :show="visible"
		:overlay="false" @beforeleave="handleBeforeLeave">
		<view> 
			<view class="diy-goods-detail-page">
				<view id="navigate" :class="['navigate-wrap', isSticky? 'sticky':'']">
					<cc-statusbar-placeholder />

					<!-- 手机状态栏 -->
					<view class="navigate-bar">
						<!-- 返回及分享按钮 -->
						<view class="nav-left">
							<view class="button-wrap">
								<uni-icons type="left" @click="close" size="24" />
								<view class="divider"></view>
								<uni-icons custom-prefix="iconfont" type="icon-share" size="24" />
							</view>
						</view>
						<!-- 标题 -->
						<view class="nav-title">{{title}}</view>
						<!-- 小程序胶囊按钮 -->
						<view class="nav-right"></view>
					</view>
				</view>

				<scroll-view @scroll="handleScroll" style="height: 100vh;" scroll-y="true" :scroll-top="0">
					<view id="banner"><diy-simple-banner></diy-simple-banner></view>
					<view class="goods-info">
						<view class="goods-name">{{goods.name}}</view>
						<view class="goods-tag">
							<view class="tag-item" v-for="tag in goods.tag">{{tag}}</view>
						</view>
						<view><cc-line-clamp>{{ goods.description }}</cc-line-clamp></view>
						<view><cc-sku :goods="goods"></cc-sku></view>
					</view>
					<view class="placeholder" />
				</scroll-view>
				<view class="addToCarWrap">
					<view class="amountNumber">
						<view class="amount">
							<view class="price-discount"><text class="comment">¥</text>{{ goods.price }}
							</view>
							<view class="price-original"><text class="comment">¥</text>{{ goods.price }}原价
							</view>
						</view> 
						<cc-number />
					</view>
					<view class="sku">中杯，冻，珍珠，零卡糖，七分糖</view>
					<view class="addToCar">
						<view class="btn">加入购物车</view>
					</view>
				</view>
			</view>
		</view>
	</page-container>
</template>

<script>
	import DiySimpleBanner from '@/diy/diy-simple-banner/diy-simple-banner.vue'
	export default {
		components: {
			DiySimpleBanner
		},
		props: {
		},
		data() {
			return {
				visible: false,
				bannerBottom: 0,
				isSticky: false,
				title: '',
				goods: {
					name: "多肉青提",
					price: 18,
					tag: ['招牌', '可做热饮', '含咖啡因'],
					description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯，底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯',
					images: ['/static/images/products/1.jpg', '/static/images/products/1.jpg'],
					sku: {
						attributes: [{
								attrId: 1,
								name: "杯型",
								price: 0,
								type: 2,
								values: [{
									selected: true,
									image: "/static/common/1.png",
									value: "500ml(小杯)"
								}, {
									selected: false,
									image: "/static/common/1.png",
									value: "600ml(中杯)"
								}, {
									selected: false,
									image: "/static/common/1.png",
									value: "700ml(大杯)"
								}]
							},
							{
								attrId: 2,
								name: "温度",
								price: 0,
								type: 1,
								values: [{
									selected: true,
									image: "",
									value: "热饮"
								}, {
									selected: false,
									image: "",
									value: "冰饮"
								}, {
									selected: false,
									image: "",
									value: "温"
								}]
							},
							{
								attrId: 3,
								name: "甜度",
								price: 0,
								type: 1,
								values: [{
									selected: true,
									image: "",
									value: "走糖"
								}, {
									selected: false,
									image: "",
									value: "少少糖"
								}, {
									selected: false,
									image: "",
									value: "少糖"
								}, {
									selected: false,
									image: "",
									value: "正常糖"
								}]
							}
						],
						addons: [{
							addonId: 1,
							name: "小料",
							price: 2,
							type: 1,
							values: [{
									selected: true,
									image: "",
									value: "珍珠",
									range: {
										min: 0,
										mnax: 4
									}
								},
								{
									selected: false,
									image: "",
									value: "椰粒",
									range: {
										min: 0,
										mnax: 4
									}
								},
								{
									selected: false,
									image: "",
									value: "水果",
									range: {
										min: 0,
										mnax: 4
									}
								}
							]
						}],
					}
				},
			}
		},
		computed: {},
		mounted() {},
		methods: {
			// 显示
			open() {
				this.visible = true;
				this.getBannerRect();
			},
			// 隐藏
			close() {
				this.visible = false;
			},
			// 处理关闭
			handleBeforeLeave() {
				this.close();
			},
			// 获取Banner位置信息
			// 在setup模式下，用以下这种方式获取不高数据
			// const {proxy} = getCurrentInstance();
			// uni.createSelectorQuery().in(proxy);
			getBannerRect() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select(`#banner`).boundingClientRect();
					query.select(`#navigate`).boundingClientRect();

					query.exec((res) => {
						const bannerRect = res[0];
						const navigateRect = res[1];
						this.bannerBottom = bannerRect.height - navigateRect.height;
					});
				})
			},

			/**
			 * 简单防抖函数
			 */
			debounce(fn, delay = 100) {
				let timer = null;
				return function(...args) {
					if (timer) clearTimeout(timer);
					timer = setTimeout(() => {
						fn.apply(this, args);
					}, delay);
				};
			},

			// 处理滚动
			handleScroll(e) {
				const scrollTop = e.detail.scrollTop;

				if ((scrollTop >= this.bannerBottom) && !this.isSticky) {
					this.isSticky = true;
					this.title = this.goods.name;
				}

				if ((scrollTop < this.bannerBottom) && this.isSticky) {
					this.isSticky = false;
					this.title = '';
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	@import "@/cc-ui-tools/scss/theme.scss";
	@import "@/cc-ui-tools/scss/animation.scss";

	.diy-goods-detail-wrap {
		position: fixed;
		min-height: 100vh;
		width: 100%;
		background-color: #f8f8f8;
		bottom: 0;
		z-index: 10000;

		&.fade-in {
			animation: fadeInUp 0.3s 0.3s linear both;
		}

		&.fade-out {
			animation: fadeOutDown 0.3s 0.3s linear both;
		}
	}

	.diy-goods-detail-page {
		position: relative;
		min-height: 100vh;
	}

	.navigate-wrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10001;
	}

	.navigate-bar {
		height: 88rpx;
		width: 100vw;
		display: flex;
		padding: 0;
		justify-content: space-between;
		align-items: center;

		.nav-left {
			width: 220rpx;
			padding-left: 5rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			.button-wrap {
				display: flex;
				align-items: center;
				height: 60rpx;
				border-radius: 22rpx;
				border: 1rpx solid #f0f0f0;
				padding: 0 15rpx;
				gap: 15rpx;
			}

			.divider {
				width: 1rpx;
				height: 35rpx;
				background-color: #f0f0f0;
				opacity: 0.9;
			}
		}

		.nav-title {
			flex: 1;
			font-size: 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.nav-right {
			width: 220rpx;
			justify-content: flex-end;
		}
	}

	.sticky {
		background: #fff;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05); //阴影
		animation: fadeIn 0.3s forwards;
		font-size: 38rpx;
		text-overflow: ellipsis;
	}

	.goods-info {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 20rpx;
		gap: 20rpx;

		.goods-name {
			font-size: 38rpx;
			color: #000;
			margin-bottom: 5rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.goods-tag {
			display: flex;
			flex-direction: row;
			color: #999;
			font-size: 22rpx;
			gap: 8rpx;

			.tag-item {
				padding: 5rpx;
				border: 1rpx solid #999;
			}
		}
	}

	.placeholder {
		background: #fff;
		height: 350rpx;
	}

	.addToCarWrap {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 10001;		
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.05); //阴影		
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.amountNumber {
			display: flex;
			justify-content: space-between;

			.amount {
				display: flex;
				align-items: center;

				.price-discount {
					font-size: 40rpx;
					color: #000;

					.comment {
						font-size: 0.8em;
					}
				}

				.price-original {
					font-size: 30rpx;
					background: #f0f0f0;
					color: #aaa084;
					padding-left: 20rpx;
					padding-right: 20rpx;
					border-top: 1rpx solid #dadacc;
					border-bottom: 1rpx solid #dadacc;
					margin-left: 5rpx;
					text-decoration: line-through;

					.comment {
						font-size: 0.9em;
					}
				}
			}
		}

		.sku {
			color: #666;
			font-size: 22rpx;
			line-height: 38rpx;
			margin-bottom: 30rpx;
		}

		.addToCar {
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #000;
				width: 100%;
				height: 90rpx;
				color: #fff;
				border-radius: 5rpx;
			}
		}
	}
</style>